// 主题色变量
$primary-color: #003366; // 深蓝色，代表专业性和可靠性
$secondary-color: #4A4A4A; // 钢铁灰，体现工业感
$warning-color: #FFB800; // 警示黄，安全警示色
$success-color: #27AE60; // 安全绿，表示正常/安全状态
$danger-color: #EB5757; // 危险红，表示危险/错误状态
$background-color: #F5F5F5; // 背景灰，柔和的页面背景色
// 布局相关
$header-height: 60px;
$sidebar-width: 240px;
$sidebar-collapsed-width: 64px;
// 响应式断点
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;
$screen-xl: 1920px;
// 阴影
$box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$box-shadow-light: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
// 圆角
$border-radius: 4px;
$border-radius-large: 8px;
// 字体
$font-family: -apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
sans-serif;
$font-size-base: 14px;
$font-size-large: 16px;
$font-size-small: 12px;
// 间距
$spacing-base: 8px;
$spacing-large: 16px;
$spacing-xlarge: 24px;
// z-index层级管理
$z-index-header: 1000;
$z-index-sidebar: 900;
$z-index-modal: 2000;
// 全局CSS变量
:root {
    // 亮色主题变量
    --primary-color: #409eff;
    --success-color: #67c23a;
    --warning-color: #e6a23c;
    --danger-color: #f56c6c;
    --info-color: #909399;
    // 背景色
    --bg-primary: #ffffff;
    --bg-secondary: #f5f7fa;
    --bg-tertiary: #fafafa;
    // 文字颜色
    --text-primary: #303133;
    --text-regular: #606266;
    --text-secondary: #909399;
    --text-placeholder: #c0c4cc;
    // 边框颜色
    --border-color: #dcdfe6;
    --border-light: #e4e7ed;
    --border-lighter: #ebeef5;
    // 阴影
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.2);
}

// 夜间模式变量
.dark-mode {
    // 主色调调整为更柔和的蓝色
    --primary-color: #60a5fa;
    --success-color: #4ade80;
    --warning-color: #fbbf24;
    --danger-color: #f87171;
    --info-color: #a0a0b8;
    // 背景色 - 使用优雅的深色渐变
    --bg-primary: #1e1e2e;
    --bg-secondary: #2d2d44;
    --bg-tertiary: #3d3d5a;
    // 文字颜色 - 更柔和的对比度
    --text-primary: #e8e8f0;
    --text-regular: #a0a0b8;
    --text-secondary: #8080a0;
    --text-placeholder: #606080;
    // 边框颜色 - 更优雅的深色边框
    --border-color: #4a4a6a;
    --border-light: #5a5a7a;
    --border-lighter: #6a6a8a;
    // 阴影 - 夜间模式下的柔和阴影
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.3);
}

// 全局夜间模式样式
.dark-mode {
    // Element Plus 组件适配
    .el-button {
        &.el-button--primary {
            background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
            border-color: #60a5fa;
            &:hover {
                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
                border-color: #3b82f6;
            }
        }
        &.el-button--success {
            background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
            border-color: #4ade80;
            &:hover {
                background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
                border-color: #22c55e;
            }
        }
        &.el-button--warning {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            border-color: #fbbf24;
            &:hover {
                background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
                border-color: #f59e0b;
            }
        }
        &.el-button--danger {
            background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
            border-color: #f87171;
            &:hover {
                background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
                border-color: #ef4444;
            }
        }
    }
    .el-input {
        .el-input__wrapper {
            background: linear-gradient(135deg, #3d3d5a 0%, #4d4d6a 100%);
            border-color: #4a4a6a;
            &:hover {
                border-color: #60a5fa;
            }
            &.is-focus {
                border-color: #60a5fa;
                box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
            }
        }
        .el-input__inner {
            color: #e8e8f0;
            &::placeholder {
                color: #a0a0b8;
            }
        }
    }
    .el-dropdown-menu {
        background: linear-gradient(135deg, #2d2d44 0%, #3d3d5a 100%);
        border: 1px solid #4a4a6a;
        box-shadow: var(--shadow-medium);
        .el-dropdown-menu__item {
            color: #a0a0b8;
            &:hover {
                background: linear-gradient(135deg, #3d3d5a 0%, #4d4d6a 100%);
                color: #e8e8f0;
            }
        }
    }
    .el-dialog {
        .el-dialog__header {
            background: linear-gradient(135deg, #2d2d44 0%, #3d3d5a 100%);
            border-bottom: 1px solid #4a4a6a;
            .el-dialog__title {
                color: #e8e8f0;
            }
            .el-dialog__headerbtn {
                .el-dialog__close {
                    color: #a0a0b8;
                    &:hover {
                        color: #60a5fa;
                    }
                }
            }
        }
        .el-dialog__body {
            background: linear-gradient(135deg, #2d2d44 0%, #3d3d5a 100%);
            color: #e8e8f0;
        }
        .el-dialog__footer {
            background: linear-gradient(135deg, #2d2d44 0%, #3d3d5a 100%);
            border-top: 1px solid #4a4a6a;
        }
    }
    .el-message-box {
        background: linear-gradient(135deg, #2d2d44 0%, #3d3d5a 100%);
        border: 1px solid #4a4a6a;
        .el-message-box__header {
            .el-message-box__title {
                color: #e8e8f0;
            }
        }
        .el-message-box__content {
            color: #a0a0b8;
        }
    }
}

// 全局过渡动画
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

// 滚动条样式优化
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(160, 160, 184, 0.3);
    border-radius: 3px;
    &:hover {
        background: rgba(160, 160, 184, 0.5);
    }
}

.dark-mode {
     ::-webkit-scrollbar-thumb {
        background: rgba(160, 160, 184, 0.4);
        &:hover {
            background: rgba(160, 160, 184, 0.6);
        }
    }
}